<template>
  <div class="dialog">
    <el-dialog width="45%" :title="title" :visible="true" :close-on-click-modal="false" append-to-body :before-close="close">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="字段类型：" prop="customType">
          <el-col :span="12">
            <el-select v-model="form.customType" placeholder="请选择" clearable>
              <el-option
                v-for="item in customTypeList"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="字段名称：" prop="fieldName">
          <el-col :span="12">
            <el-input v-model="form.fieldName" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="字段属性值：" prop="fieldAttribute">
          <el-col :span="12">
            <el-input v-model="form.fieldAttribute" type="textarea" rows="5" placeholder="请输入字段属性值，多属性请用逗号隔开" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="提示文案：" prop="fieldPrompt">
          <el-col :span="12">
            <el-input v-model="form.fieldPrompt" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="最小长度：" prop="minLength">
          <el-col :span="12">
            <el-radio-group v-model="form.minLength">
              <el-radio :label="0">不设置</el-radio>
              <el-radio :label="1">设置</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.minLength === 1" label="" prop="fieldMinLength">
          <el-col :span="12">
            <el-input v-model="form.fieldMinLength" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
        <el-form-item label="最大长度：" prop="maxLength">
          <el-col :span="12">
            <el-radio-group v-model="form.maxLength">
              <el-radio :label="0">不设置</el-radio>
              <el-radio :label="1">设置</el-radio>
            </el-radio-group>
          </el-col>
        </el-form-item>
        <el-form-item v-if="form.maxLength === 1" label="" prop="fieldMaxLength">
          <el-col :span="12">
            <el-input v-model="form.fieldMaxLength" placeholder="请输入" clearable />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'AddField',
  components: {
  },
  props: {
    type: {
      type: String,
      default: 'person' // person 个人   company 企业
    },
    index: {
      type: Number,
      default: -1
    },
    formDetail: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      loading: false,
      customTypeList: [{ label: '文本框', value: 'text' }],
      form: {
        customType: '',
        fieldName: '',
        fieldAttribute: '',
        fieldPrompt: '',
        minLength: '',
        fieldMinLength: '',
        maxLength: '',
        fieldMaxLength: ''
      },
      rules: {
        customType: [{ required: true, message: '请选择字段类型', trigger: ['change'] }],
        fieldName: [{ required: true, message: '请输入字段名称', trigger: ['blur'] }],
        fieldPrompt: [{ required: true, message: '请输入提示文案', trigger: ['blur'] }],
        minLength: [{ required: true, message: '请选择是否设置最小长度', trigger: ['change'] }],
        fieldMinLength: [{ required: true, message: '请输入最小长度', trigger: ['blur'] }],
        maxLength: [{ required: true, message: '请选择是否设置最大长度', trigger: ['change'] }],
        fieldMaxLength: [{ required: true, message: '请输入最大长度', trigger: ['blur'] }]
      }
    }
  },

  computed: {
    title() {
      if (this.index > -1) {
        return '编辑自定义字段'
      } else {
        return '添加自定义字段'
      }
    }
  },

  created() {
    this.form = { ...this.formDetail }
  },

  methods: {

    // 取消
    close() {
      this.$emit('close')
    },

    // 确认
    confirm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          this.$emit('confirm', { form: this.form, index: this.index, type: this.type })
          this.loading = false
          this.close()
        } else {
          return false
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.el-select{
  width: 100%;
}
</style>
